<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>在线点餐</title>
<script type="text/javascript" src="/lib/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/lib/js/jquery.qrcode.min.js"></script> 
<link href="/lib/css/business.css" type="text/css" rel="stylesheet"/> 
<style type="text/css">
/**导航*/
.nav{
	clear: all;
	float:right;
	margin-right: 10px;
	z-index: 10;
	width: 50px;
	height: 100px;
	background-color: red;
}
/*导航动画*/
.adv{
	width:800px;  
	height:250px;
	position:relative;
	margin-left: auto;
	margin-right: auto;  
	clear: all; 
	overflow:hidden;
}
.box2{
	position:absolute;
	width:800px;
	height:750px;
	z-index:1;
	list-style-type: none;
}
.box3{
	position:absolute;
	z-index:2;
	top:220px;
	left:650px;
	list-style-type: none;
}	
.box3 li{
	float:left;
	width:28px;
	height:28px;
	text-align:center;
	line-height:28px;
	font:12px;
	color:#514f5c;
	margin: 3px 3px 3px 3px;
	background-color:#d2cdcc;
}

.box3 li a:hover{
	display:block;
	background-color:#e9e8ec;
}
.long{
	display:block;
	background-color:#c1c0c4;
}




.all_dish{
	widtt: 800px;
	height: 100%;
	border: 0px;
}
/**菜品*/
.dish{
	display: inline-block;
	width: 190px;
	height: 200px;
}

/*结算*/
.goCheck{
	background-image: url('/lib/images/business/goCheck.png');
	background-repeat: no-repeat;
	width: 800px;
	height: 50px;
	margin-bottom: 5px;
	text-algin: right;
}
.goCheck input{
	float: right;
	margin: 20px 20px auto;
}
</style>
<script type="text/javascript">
$(function(){
	$(".box2").append($(".box2").children("li").clone());
	$(".adv").append($(".box2").clone);  
	var speed = 0;
	function imgScroll(){
		var imgPos = $(".box2").position();
		$(".box2").animate({top:speed});
		if(Math.abs(speed)<500){
			speed -= 255;	
		}else{
			speed=0;	
		}
	}
	var timer = setInterval(imgScroll,1500);
	$(".adv").hover(
		function(){
			clearInterval(timer);	
		},
		function(){
			timer=setInterval(imgScroll,1500);
		}
	);
		
	$(".box3 li").click(function(){
		var index = $(".box3 li").index(this);
		$(".box2").animate({top:(index*-255)});
	})

	$(".box3 li").mouseover(function(){
		$(".box3 li").addClass("long");
		$(this).removeClass("others").addClass("current");
		var index = $(".box3 li").index(this);
		$(".box2").animate({top:(index*-250)-5});
	})
	

	
});


</script>
</head>
<body>
<div class="bgbox">
<div id="header" class="header"  >
	<%	var name = session.account.name!;
	if(name == null){ %>
	<a href="javascript:showLogin();" class="left"><span>登录</span>|</a>
	<% }else{ %>
	<a href="/toModifyAccountMsg" class="left"><span>${session.account.name!}</span>|</a>
	<% } %>
	<a href="/business/cart/toCart" class="left"><span>我的购物车</span>|</a>
	<a href="/" class="left"><span>首页</span></a>
	<a href="/logout" class="right"><span>退出</span></a>
	<a href="/business/order/toOrderHistory" class="right"><span>我的订单</span>|</a>
</div>
	<div id="adv" class="adv">
    	<ul class="box2">
            <li class="content"><a href="#"><img alt="1" src="/lib/images/business/adv/img01.jpg"/></a></li>
            <li class="content"><a href="#"><img alt="2" src="/lib/images/business/adv/img03.jpg"/></a></li>
            <li class="content"><a href="#"><img alt="3" src="/lib/images/business/adv/img02.jpg"/></a></li>
        </ul> 
        <ul class="box3">
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
        </ul>
	</div>
<div id="main" class="main">
	<ul>
	<% for(c in cuisine){ %>
		<li class="separate"> ${c.name}</li>
		<li>
			<ul>
				<li id="all_dish">
	<%	for(d in c.dishs){ %>
					<div class="dish">
						<form action="/business/cart/toCart" method="post">
						<input type="hidden" value="${d.cuisine_dish_id}" name="cuisine_dish_id" />
						<div id="dish_img" title="${d.info}">
							<a href="/business/dish/getDishDetial?page=1&pageSize=10&cuisine_dish_id=${d.cuisine_dish_id}"><img alt="说明" style="width:160px;height:160px;" src="${d.image}"/></a>
						</div>
						<div>
							<div style="background-image: url(/lib/images/business/header.png);">${d.name}</div>
						</div>
						<div id="dish_info">
							<span>价格：￥</span><span>${d.price,'#.##'}</span>
						</div>
						<div id="operation">
							<input type="button" value="加入购物车" onclick="addToCart(${d.cuisine_dish_id});"/>
							<input type="submit" value="下单" onclick="return toOrder();"/>
						</div>
						</form>
					</div>
	<% 	} %>
				</li>
			</ul>
		</li>
	</ul>
	<% } %>
</div>
<div id="footer" class="footer">
	<table>
		<tr>
			<td><span class="right">咨询电话：</span></td>
			<td><a href="#" class="left">123456</a></td>
			<td><span class="">送餐电话：</span></td>
			<td><a href="#">123456</a></td>
		</tr>
	</table>
</div>
<!-- 登录div -->
<div class="login" id="login">
	<div class="fr_login">
	<img style="float:right;" onclick="hideLogin();" src="/lib/images/business/close.png"/>
	<br/>
	<iframe src="/toFrLogin"></iframe>
	</div>
</div>
<!-- 导航区 -->
<div clas="nav">
	<a href="#" class="toTop" title="返回顶部"></a>
	<a class="showerweima" href="javascript:void();" title="二维码"></a><!-- 显示二维码 -->
</div>
<!-- 生成二维码 -->
<div class="erweima" style="display:none;">
	<div id="erweima"></div>
</div>
<!-- <object style="border:0px" type="text/x-scriptlet" data="getHeader" width=100% height=30></object> -->
</div>
</body>
<script type="text/javascript" src="/lib/js/business.js"></script>
<script type="text/javascript">

parent.document.all("login").style.height=document.body.scrollHeight; 
parent.document.all("login").style.width=document.body.scrollWidth; 
</script>
</html>